---
title: "Home"
description: "Learn about AnythingLLM's features and how to use them"
---

import { Cards } from "nextra/components";
import Image from "next/image";

# AnythingLLM Documentation

Learn about AnythingLLM's features and how to use them

<br />

<Cards>
  <Card title="Get Started" href="introduction"> 
    <Image
      src="/images/getting-started/header-image.png" 
      height={1080} 
      width={1920} 
      quality={100}
      alt="AnythingLLM Get Started"
    />
  </Card>

<Card title="Installation" href="installation-desktop/overview">
  <Image
    src="/images/getting-started/installation/header-image.png"
    height={1080}
    width={1920}
    quality={100}
    alt="AnythingLLM Installation"
  />
</Card>

<Card title="Features" href="features/all-features">
  <Image
    src="/images/features/header-image.png"
    height={1080}
    width={1920}
    quality={100}
    alt="AnythingLLM Features"
  />
</Card>

<Card title="AnythingLLM Cloud" href="cloud/overview">
  <Image
    src="/images/cloud/header-image.png"
    height={1080}
    width={1920}
    quality={100}
    alt="AnythingLLM Cloud"
  />
</Card>

<Card title="Roadmap" href="roadmap">
  <Image
    src="/images/product/roadmap/header-image.png"
    height={1080}
    width={1920}
    quality={100}
    alt="AnythingLLM Roadmap"
  />
</Card>

  <Card title="Changelog" href="changelog/overview"> 
    <Image
      src="/images/product/changelog/header-image.png" 
      height={1080} 
      width={1920} 
      quality={100}
      alt="AnythingLLM Changelog"
    />
  </Card>  
</Cards>

export const Card = Object.assign(
  // Copy card component and add default props
  Cards.Card.bind(),
  {
    displayName: "Card",
    defaultProps: {
      image: true,
      arrow: true,
      target: "_self",
    },
  }
);

<style global jsx>{`
  img {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
`}</style>
